<template>
    <view v-if="value">
        <view class="a-popup-mask" @click="onMaskClick"></view>
        <view class="a-dialog">
            <view class="a-dialog-title" v-if="title">{{title}}</view>
            <view class="a-dialog-msg" v-if="confirmInput">
                <textarea v-model="promptInput" placeholder="点此输入" v-if="textarea" :maxlength="maxLength" auto-height></textarea>
                <input v-model="promptInput" placeholder="点此输入" v-else :maxlength="maxLength"/>
            </view>
            <view class="a-dialog-msg" v-else v-html="msg"></view>

            <view class="a-dialog-action">
                <view class="color-cancel" @click="cancel" v-if="showCancel">取消</view>
                <view class="color-primary" @click="confirm">{{confirmText}}</view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        name: "my-confirm",
        props: {
            value: {
                type: Boolean,
                default: false
            },
            title: {
                type: String,
                default: '操作确认'
            },
            msg: {
                type: String
            },
            confirmText: {
                type: String,
                default: '确定'
            },
            showCancel: {
                type: Boolean,
                default: true
            },
            confirmInput: {
                type: Boolean,
                default: false
            },
            maskClose: {
                type: Boolean,
                default: false
            },
            textarea: {
                type: Boolean,
                default: false
            },
            maxLength: {
                type: Number,
                default: -1
            }

        },
        data() {
            return {
                promptInput: ''
            }
        },
        methods: {
            onMaskClick() {
                if (this.maskClose) {
                    this.hide();
                }
            },
            cancel() {
                this.$emit('cancel');
                this.$emit('input', false);
            },
            confirm() {
                if (this.confirmInput) {
                    if (this.promptInput.length === 0) {
                        this.$emit('input-empty');
                        return;
                    }
                    this.$emit('input', false);
                    this.$emit('confirm', this.promptInput);
                } else {
                    this.$emit('input', false);
                    this.$emit('confirm');
                }
            },
            hide() {
                this.$emit('input', false);
            },
            clear() {
                this.promptInput = '';
            }
        }
    }
</script>

<style scoped lang="less">
    .a-popup-mask {
        z-index: 90000000;
    }

    .a-dialog {
        z-index: 99999999;
    }

    input, textarea {
        border-radius: unit(4, upx);
        border: 1px solid #EEEEEE;
        font-size: unit(28, upx);
        line-height: unit(60, upx);
        padding: unit(10, upx) unit(20, upx);
        width: 50%;
        margin: auto;
    }

    textarea {
        width: 90%;
        text-align: left;
        line-height: unit(40, upx);
        min-height: unit(100,rpx);
    }
</style>
